<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 搜索区域 start -->
      <el-form
        :inline="true"
        :model="requestParameters"
        class="demo-form-inline"
        size="small"
      >
        <el-row type="flex" justify="">
          <el-col :span="18">
            <el-form-item label="学科名称" style="padding-left: 12px">
              <el-input v-model="requestParameters.subjectName" />
            </el-form-item>
            <el-form-item>
              <el-button @click="clear">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
          <!-- 新增 -->
          <el-col :span="6">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              class="filter-item fr"
              @click="handleChange('add')"
            >新增学科</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 搜索区域 end -->

      <!-- 数据记录 start -->
      <el-alert
        :title="alertText"
        style="margin-bottom: 15px"
        type="info"
        show-icon
      />
      <!-- 数据记录 end -->

      <!-- 数据列表 start -->
      <el-table
        :data="dataList"
        fit
        :highlight-current-row="true"
        style="width: 100%"
        :border="false"
      >
        <el-table-column align="left" label="序号" type="index" width="50" />
        <el-table-column align="left" label="学科名称" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.subjectName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="创建者" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="创建日期" width="150">
          <template slot-scope="scope">
            <span>{{ format(scope.row.addDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="前台是否显示" width="100">
          <template slot-scope="scope">
            <span>{{ show[scope.row.isFrontDisplay] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="二级目录" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.twoLevelDirectory }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="标签" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.tags }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="题目数量" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.totals }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="medium"
              @click="classify(scope.row)"
            >学科分类</el-button>
            <el-button
              type="text"
              size="medium"
              @click="label(scope.row)"
            >学科标签</el-button>
            <el-button
              type="text"
              size="medium"
              @click="hEdit(scope.row.id)"
            >修改</el-button>
            <el-button
              type="text"
              size="medium"
              @click="hDel(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 数据列表 end -->
      <!-- 分页 start -->
      <div class="pagination">
        <div class="pages">
          <el-pagination
            background
            class="page"
            :current-page="requestParameters.page"
            :total="total"
            :page-size="requestParameters.pagesize"
            :page-sizes="[5, 10, 15, 20]"
            layout=" prev, pager, next,sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- 分页 end -->
      <!-- 新增学科弹层 start -->
      <el-dialog
        :title="cTitle"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="dialogFormVisible"
        width="400px"
      >
        <Dialog
          v-if="dialogFormVisible"
          :cur-id="curId"
          :is-edit="isEdit"
          @success="hSuccess"
          @close="close"
        />
      </el-dialog>
      <!-- 新增学科弹层 end -->
    </el-card>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects'
import moment from 'moment'
import Dialog from '@/module-hmmm/components/subjects-add'
// 枚举文件
import enumerate from '@/api/base/subjects'

const { status } = enumerate // 解构
const show = status.reduce((obj, item) => {
  obj[item.id] = item.value
  return obj
}, {})
console.log(show)

export default {
  components: {
    Dialog
  },
  data() {
    return {
      show,
      curId: null,
      isEdit: false,
      dialogFormVisible: false, // 是否显示 新增弹框
      dataList: [],
      alertText: '',
      total: null,
      requestParameters: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      }
    }
  },
  computed: {
    cTitle() {
      // 判断弹出层的标题
      return this.isEdit ? '修改学科' : '新增学科'
    }
  },
  created() {
    // 读取数据
    this.getList()
  },
  methods: {
    // 用户点击了新增
    handleChange() {
      this.isEdit = false
      // 打开弹层
      this.dialogFormVisible = true
    },
    // 添加
    hSuccess() {
      this.dialogFormVisible = false
      // 添加成功,进入第一页看数据
      this.total++
      this.requestParameters.page = 1
      // 重新读取数据
      this.getList()
    },
    // 清除搜索框
    clear() {
      this.requestParameters = {}
    },
    close() {
      this.dialogFormVisible = false
      this.getList()
    },

    // 删除列表数据
    // 用户点击了删除
    hDel(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.doDel(id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 删除
    async doDel(id) {
      try {
        const res = await remove({ id })
        console.log(res)
        // 1. 提示
        this.$message.success('删除成功')

        // 2. 如果当前表格中数据只有一条,删除之后自动请求上一页数据
        if (this.requestParameters.length === 1) {
          this.requestParameters.page--
          if (this.requestParameters.page <= 0) {
            this.requestParameters.page = 1
          }
        }
        // 3. 重新请求
        this.getList()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },

    // 用户点击了修改
    hEdit(id) {
      // 显示弹层
      this.isEdit = true
      this.dialogFormVisible = true
      this.curId = id
    },

    // 获取列表数据
    async getList(params) {
      try {
        const res = await list(this.requestParameters)
        console.log(res)
        // 获取数据给dataList
        this.dataList = res.data.items
        // 获取总条数
        this.total = res.data.counts
        this.alertText = `共 ${this.total} 条记录`
      } catch (err) {
        console.log(err)
      }
    },
    // 格式化时间
    format(addDate) {
      return moment(addDate).format('YYYY-MM-DD HH:mm:ss')
    },

    // 搜索
    search() {
      this.getList()
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val
      this.getList(this.requestParameters)
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val
      this.getList()
    },
    // 跳转去学科标签页
    label(row) {
      this.$router.push({
        path: `/subjects/tags`,
        query: { id: row.id, name: row.subjectName }
      })
    },
    // 跳转去学科分类页
    classify(row) {
      this.$router.push({
        path: `/subjects/directorys`,
        query: { id: row.id, name: row.subjectName }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  float: right;
  margin: 15px 0;
}
</style>

<style>
::v-depp .el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
</style>
